<template>
	<view class="classify" :style="{ height: windowHeight + 'px' }">
		<div class="left">
			<text @click="activeIndex = index" :class="{active: index === activeIndex}" v-for="(item, index) in title"
				:key="index">{{ item }}</text>
		</div>
		<div class="right">
			<list-item v-for="(item, index) in list" :key="index" :item="item" />
		</div>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils';
	import {  mapState, mapMutations } from 'vuex';
	import carMixins from '../../mixins/car.mixins.js'
	export default {
		mixins: [carMixins],
		watch: {
			activeIndex(i) {
				if (this.cache[this.title[i]]) {
					this.list = this.cache[this.title[i]]
				} else {
					this.getList()
				}
			}
		},
		data() {
			return {
				list: [],
				activeIndex: 0,
				windowHeight: 0,
				cache: {}
			};
		},
		methods: {
			...mapMutations(['setTitle']),
			async getTitle() {
				const resp = await request({
					url: 'http://localhost:3000/title'
				})
				this.setTitle(resp.data)
				this.getList()
			},
			async getList() {
				const resp = await request({
					url: 'http://localhost:3000/list',
					data: {
						type: this.title[this.activeIndex]
					}
				})
				this.list = resp.data
				// 数据缓存
				this.cache[this.title[this.activeIndex]] = resp.data
			}
		},
		onLoad() {
			this.getTitle();

			const {
				windowHeight
			} = uni.getWindowInfo();
			this.windowHeight = windowHeight
		},
		computed: {
			...mapState(['title'])
		}
	}
</script>

<style lang="scss" scoped>
	.classify {
		display: flex;

		.left {
			width: 120upx;
			height: 100%;
			overflow-y: scroll;
			border-right: 2upx solid #ccc;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-left: 4upx solid #fff;

			text {
				margin: 10upx 0;
				padding-left: 10upx;

				&.active {
					color: red;
					border-left: 4upx solid red;
				}
			}
		}

		.right {
			flex: 1;
			height: 100%;
			overflow-y: scroll;
		}
	}
</style>